var app = new Vue({
   el:"#app",
    data:{title:"OK",users:[],user:{}},
    mounted: function(){ // 这个方法非常重要，它只vuejs实例化完毕之后处理的mounted
      this.list();
    },
    methods:{

       //规划
       //1:查询
       list:function(){
           // promise 承诺-解决异步回调的问题
           var that = this;
           axios.get("findUsers2").then(function(response){
               if(response.status==200) {
                   var data = response.data;
                   that.$data.users = data;
               }
           },function(err){

           })
       } ,

        // 添加
      add :function(){
        $("#myModal-save").modal("show");//让模态框弹出来
      },


       // 分页
       page:function(){
       } ,

       //2：保存
       save:function(){
           var that = this;
           axios.post("save",that.user).then(function (response) {
               that.list();
               //清空
               that.$data.user = {
                   username:"",
                   password:"",
                   name:""
               };
           }).catch(function (msg) {
               console.log(msg);
           });
       } ,

       // 修改
       update:function(id){
           var that = this;
           axios.get("get2/"+id).then(function(response){
               console.log(response);
               if(response.status==200){

                   that.$data.user = response.data;
                   $("#myModal").modal("show");//让模态框弹出来
               }
           });


           axios.get("get2?id="+id).then(function(response){
               console.log(response);
               if(response.status==200){

                   that.$data.user = response.data;
                   $("#myModal").modal("show");//让模态框弹出来
               }
           });


           axios.get("get2",{params:{id:id}}).then(function(response){
               console.log(response);
               if(response.status==200){

                   that.$data.user = response.data;
                   $("#myModal").modal("show");//让模态框弹出来
               }
           });
       },

        //编辑
        modify:function(){

            var that = this;
            axios.post("update",that.user).then(function (response) {
                that.list();
            }).catch(function (msg) {
                console.log(msg);
            });
        },

       // 删除
       del:function(id,index) {
           var flag = confirm("你确定删除吗?");
           if(flag) {
               var that = this;
               axios.post("delete/" + id).then(function (response) {
                   //1：都重新刷新，这个偷懒的做法
                   //that.list();
                   //2: 删除哪行，就删除哪行
                    that.$data.users.splice(index,1);
               }).catch(function (err) {
                   console.log("出错了!!!")
               })


               // axios.post("delete2",{"id":id}).then(function (response) {
               //
               // }).catch(function (err) {
               //     console.log("出错了!!!")
               // })
           }
       }
    }
});

//1 引入vue.js
//2: 定义范围
//2: 监测vuejs是否引入正确



